<template>
    <div class="invite">
        <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp"></gltitle>
        <div class="invite-con" :class="{bg1:lang=='en',bg2:lang=='jp'}" ref="imageWrapper">
            <div style="height:5.79rem"></div>
            <div class="invite-bg">
                <div style="height:.46rem"></div>
                <div class="invite-ewm">
                    <div style="height:.45rem"></div>
                    <div class="img">
                        <div id="qrcode" ref="qrcode"></div>
                    </div>
                    <div class="code">
                        <div>{{ $t('login.spreadMemberUsername') }}：</div>
                        <p>{{ invitecode }}</p> <img
                            src="../../assets/images/invitecopy.png" alt="" @click="onCopy(invitecode,0)" /></div>
                </div>
                <div class="invite-line"></div>
                <div class="invite-link">
                    <div class="link">{{linkshare}}</div>
                    <div class="link-btn flexcenter" @click="onCopy(linkshare,1)">{{$t('new.desc132')}}</div>
                </div>
                <div class="share-tips">{{$t('new.desc133')}}</div>
                <div class="share-icon">
                    <div class="icon-info" @click="headleWhateApp">
                        <img src="../../assets/images/blcimg/shareicon1.png" alt="" />
                        <p>Whaslsapp</p>
                    </div>
                    <div class="icon-info" @click="headleTelegram">
                        <img src="../../assets/images/blcimg/shareicon2.png" alt="" />
                        <p>Telegram</p>
                    </div>
                    <div class="icon-info" @click="headleTwitter">
                        <img src="../../assets/images/blcimg/shareicon3.png" alt="" />
                        <p>Twitter</p>
                    </div>
                    <div class="icon-info" @click="headleFacebook">
                        <img src="../../assets/images/blcimg/shareicon4.png" alt="" />
                        <p>Facebook</p>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";
export default {
    data() {
        return {
            titleSize: this.$t('new.desc44'),
            is_mt: true,
            invitecode: '',
            linkshare: '',
            lang: ''
        }
    },
    mounted() {
        this.lang = localStorage.getItem('language')
        this.$post(this.URL.user.invitecode, {}).then(res => {
            if (res.code == 0) {
                this.invitecode = res.data.inviteCode;
                this.linkshare = `${document.location.protocol}//${window.location.host}/register?inviteCode=${this.invitecode}&lang=${localStorage.getItem("language")}`;
                setTimeout(() => {
                    this.qrCode();
                }, 1000);
            } else {
                this.$toast(res.message);
            }
        })
    },
    methods: {
        headleWhateApp() {
            let text = this.$t('new.desc131');
            window.location.href =`https://api.whatsapp.com/send?text="+ encodeURIComponent(${text}) + encodeURIComponent("\n\n"+${this.linkshare})+"&via=lopscoop`
        },
        headleTwitter() {
            let url = encodeURIComponent(this.linkshare) + '&text=' + encodeURIComponent(this.$t('new.desc131'))
            window.location.href = 'http://twitter.com/share?url=' + url
        },
        headleTelegram() {
            let url = encodeURIComponent(this.linkshare) + '&text=' + encodeURIComponent(this.$t('new.desc131'))
            window.location.href = 'https://t.me/share/url?url=' + url
        },
        headleFacebook() {
            window.location.href =
                'http://www.facebook.com/sharer.php?u=' +
                encodeURIComponent(this.linkshare) +
                '&t=' +
                encodeURIComponent(this.$t('new.desc131'))
        },

        onCopy(e,i) {
            if(i==0){
                e=JSON.stringify(e)
            }
            this.$copyText(e).then(e => {
                this.$toast(this.$t('toast.copy_success'));
            })
        },
        toImage() {
            html2canvas(this.$refs.imageWrapper).then((canvas) => {
                let dataURL = canvas.toDataURL("image/png");
                this.imgUrl = dataURL;
                if (this.imgUrl !== "") {
                    console.log(this.imgUrl);
                    const a = document.createElement("a");
                    a.href = this.imgUrl;
                    a.download = this.$t("new.desc44");
                    a.click();
                }
            });
        },
        qrCode() {
            new QRCode(this.$refs.qrcode, {
                text: this.linkshare,
                colorDark: "#000000",
                colorLight: "#ffffff",
                width: 200,
                height: 200,
                correctLevel: QRCode.CorrectLevel.H,
            });
        },
    }
}
</script>

<style lang="less" scoped>
.invite-con {
    width: 100%;
    min-height: 16.24rem;
    padding-bottom: .32rem;
    background: url('../../assets/images/invitebgzh.png') center no-repeat;
    background-size: 100% 100%;
    .invite-bg {
        width: 6.86rem;
        height: 10.02rem;
        margin: 0 auto;
        background: url('../../assets/images/blcimg/shareinfobg.png') center no-repeat;
        box-shadow: 0rem 0.02rem 0.1rem 0rem #0437a5;
        border-radius: .2rem;
        background-size: 100%;
        .invite-ewm {
            width: 4.2rem;
            height: 4.2rem;
            margin: 0 auto;
            background: url('../../assets/images/shareinfobg2.png') center no-repeat;
            background-size: 100%;
            .img {
                width: 2.63rem;
                margin: 0 auto;
            }

            .code {
                display: flex;
                padding: 0 .3rem;
                margin-top: .1rem;
                justify-content: center;
                font-size: .35rem;
                color: #0050F0;
                line-height: .34rem;
                p{
                    line-height: .68rem;
                }
                img {
                    width: .35rem;
                    height: .34rem;
                    margin:.12rem 0 0 .16rem;
                }
            }
        }
        .invite-line{
            width: 6.47rem;
            padding-top: .32rem;
            margin:0 auto;
            border-bottom: 1px dashed #979797;
        }
        .invite-link {
            width: 5.85rem;
            margin: .4rem auto 0;

            .link {
                padding: 0 .3rem;
                height: 0.78rem;
                border: 0.01rem solid #979797;
                border-radius: 0.16rem;
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: .78rem;
            }

            .link-btn {
                margin-top: .24rem;
                height: 0.76rem;
                background: #2a64e4;
                border-radius: 0.16rem;
                font-size: .28rem;
                color: #FFFFFF;
            }
        }

        .share-tips {
            padding: .58rem 0 .26rem;
            font-size: .28rem;
            color: #222222;
            text-align: center;
        }

        .share-icon {
            display: flex;

            .icon-info {
                flex: 0 0 25%;
                font-size: .28rem;
                color: #999999;
                text-align: center;

                img {
                    width: .8rem;
                    height: .8rem;
                    margin-bottom: .1rem;
                }
            }
        }
    }

}

.bg1 {
    background: url('../../assets/images/invitebgen.png') center no-repeat;
    background-size: 100% 100%;
}

.bg2 {
    background: url('../../assets/images/invitebgjp.png') center no-repeat;
    background-size: 100% 100%;
}

.invitebtn {
    position: fixed;
    bottom: .88rem;
    left: 50%;
    width: 6.21rem;
    height: 0.88rem;
    font-size: .32rem;
    color: #fff;
    background: linear-gradient(0deg, #ff9d01 0%, #f5ab25 100%);
    border-radius: 0.16rem 0.16rem 0.16rem 0.16rem;
    transform: translateX(-50%);
}
</style>